<template>
  <div class="height_100">
    <div class="height_100" v-if="!isAddSensor">
      <page-model
        :title=title
        :btnName=btnName
        @titleEvent=titleEvent
      >
      <div v-show="navList.length" class="dataMain">
        <menu-nav
        :navList=navList
        :defaultIndex=defaultIndex
        @navClick=navClick
        >
        </menu-nav>
          <desc-title
          :descTitle="descTitle1"
          class="pt-25 desc"
          ></desc-title>
          <Content
          :title="title"
          :desData="desData"
          @editScene="editScene"
          @editDevice="editDevice"
          >
          <desc-title
            :descTitle="descTitle2"
            :desBtnName="descBtnName"
            @desEvent="desClick"
            >
          </desc-title>
          </Content>
        <div v-if="showAddBox">
          <add-device  :selectList=selectList ></add-device>
        </div>
      </div>
      <div v-show="!navList.length" class="flex-center height_80">
            <empty></empty>
      </div>
      </page-model>
      <slot />
    </div>
  </div>
</template>

<script>
import addDevice from './addDevice'
import Content from './content'
export default {
  props: {
    title: {
      require: String,
      default: ''
    },
    btnName: {
      require: String,
      default: ''
    },
    descTitle1: {
      require: String,
      default: ''
    },
    descTitle2: {
      require: String,
      default: ''
    },
    navList: {
      require: Array,
      default: () => { return [] }
    },
    pageData: {
      require: Array,
      default: () => { return [] }
    }
  },
  data () {
    return {
      currentData: null,
      descBtnName: '添加',
      selectList: [],
      sceneData: [],
      defaultIndex: 0
    }
  },
  methods: {
    titleEvent () {
      this.$store.commit('sceneController/update_deviceData', null)
      sessionStorage.removeItem('sceneId')
      this.$router.push('/addhighFormSensor')
    },
    navClick (index) {
      this.currentData = this.pageData[index]
      this.defaultIndex = index
      this.$store.commit('sceneController/update_currentList', this.pageData[index])
      this.getDeviceList()
    },
    desClick () {
      this.$store.commit('sceneController/update_deviceData', null)
      this.$store.commit('set_ifShowCover', true)
    },
    getSeletList () {
      this.$store.dispatch('sceneController/updateSelectData', 2).then(res => {
        this.selectList = res
      })
    },
    editScene (data) {
      this.sceneData = data
      this.$store.commit('sceneController/update_isAddSensor', true)
    },
    editDevice (data) {
      this.$store.commit('sceneController/update_deviceData', data)
      this.$store.commit('set_ifShowCover', true)
    },
    getDeviceList () {
      // // console.log(this.sceneId)
      const params = {
        projectId: 1,
        index: 1,
        pageSize: 10,
        sceneId: this.sceneId
      }
      this.$store.dispatch('sceneController/updateTableData', params)
    }
  },
  watch: {
    navList (a, b) {
      a.length && this.navClick(0)
    }
  },
  computed: {
    showAddBox () {
      return this.$store.state.ifShowCover
    },
    desData () {
      const data = this.currentData || this.pageData[0]
      return data
    },
    sceneId () {
      return this.$store.state.sceneController.currentList.sceneId
    },
    isAddSensor () {
      return this.$store.state.sceneController.isAddSensor
    }
  },
  mounted () {
    this.getSeletList()
  },
  components: {
    Content, addDevice
  }
}
</script>

<style lang="scss" scoped>
.dataMain{
  min-height: calc(100% - 90px);
  background-color: #fff;
  margin-bottom: 30px;
  .desc{
    background-color: #f2f2f2;
  }
}
</style>
